<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表单模块文档 - layui.form</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<form class="layui-form" lay-filter="form-filter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<div class="layui-form-item">
			<label class="layui-form-label">输入框</label>
			<div class="layui-input-block">
				<input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">下拉选择框</label>
			<div class="layui-input-block">
				<select name="interest" lay-filter="aihao">
					<option value="0">写作</option>
					<option value="1">阅读</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">复选框</label>
			<div class="layui-input-block">
				<input type="checkbox" name="like[write]" title="写作" lay-filter="checkbox_aihao">
				<input type="checkbox" name="like[read]" title="阅读" lay-filter="checkbox_aihao">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">开关关</label>
			<div class="layui-input-block">
				<input type="checkbox" lay-skin="switch">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">开关开</label>
			<div class="layui-input-block">
				<input type="checkbox" checked lay-skin="switch" lay-filter="switch-kaiguan">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单选框</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="0" title="男" lay-filter="radio-filter">
				<input type="radio" name="sex" value="1" title="女" checked lay-filter="radio-filter">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">请填写描述</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="desc" lay-verify="number|xxx"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="*1">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	<script src="layui.js"></script>
	<script>
		layui.use('form', function () {
			var form = layui.form;

			//各种基于事件的操作，下面会有进一步介绍:：<select lay-filter="test"></select>

			//触发select选择
			form.on('select(aihao)', function (data) {
				console.log(data);
			});

			//触发checkbox复选
			form.on('checkbox(checkbox_aihao)', function (data) {
				console.log(data);

				// console.log(data.elem); //得到checkbox原始DOM对象
				console.log(data.elem.checked); //是否被选中，true或者false
				// console.log(data.value); //复选框value值，也可以通过data.elem.value得到
				// console.log(data.othis); //得到美化后的DOM对象
			});

			//触发switch开关
			form.on('switch(switch-kaiguan)', function (data) {
				console.log(data.elem); //得到checkbox原始DOM对象
				console.log(data.elem.checked); //开关是否开启，true或者false
				console.log(data.value); //开关value值，也可以通过data.elem.value得到
				console.log(data.othis); //得到美化后的DOM对象
			});

			//触发radio单选
			form.on('radio(radio-filter)', function (data) {
				console.log(data.elem); //得到radio原始DOM对象
				console.log(data.value); //被点击的radio的value值
			});
			
			//自定义验证
			form.verify({
				xxx: function (value, item) { //value：表单的值、item：表单的DOM对象
					// if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
					// 	return '用户名不能有特殊字符';
					// }
					// if (/(^\_)|(\__)|(\_+$)/.test(value)) {
					// 	return '用户名首尾不能出现下划线\'_\'';
					// }
					// if (/^\d+\d+\d$/.test(value)) {
					// 	return '用户名不能全为数字';
					// }

					//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
					if (value === 'xxx') {
						alert('用户名不能为敏感词');
						return true;
					}
					return "不符合规则";
				}

				//我们既支持上述函数式的方式，也支持下述数组的形式
				//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
				, pass: [
					/^[\S]{6,12}$/
					, '密码必须6到12位，且不能出现空格'
				]
			});

			//触发submit提交
			form.on('submit(*1)', function (data) {
				// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				// console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}



				//给表单赋值
				form.val("form-filter", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					"username": "贤心" // "name": "value"
					, "sex": 0
					, "interest": 1
					, "like[write]": true
					, "open": false
					, "desc": "我爱layui"
				});

				//获取表单区域所有值
				var data1 = form.val("form-filter");
				console.log(data1)

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});


		});

	</script>


</body>

</html>